<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
    #content{
        /* 1. visibility:hidden;不显示，但仍然占据文档流 */
        /* display:none;让元素脱离文档流 */
        /*2.position:absolute;
        left:-100%;*/
        /* 行内块级元素
        即不换行，又可以做盒子 设置宽高 */
         /* display:inline;
        inline 行内元素 不能设置宽和高 */
        /*3.display:inline-block; 
         width:200px;
         height:200px;
         transform:scale(0,0);
        background-color: green;*/
        /* scale:0; */
        /* 4.opacity:0; */
        /*5.
        display:inline-block;
        transform: translate(-100%);*/
        /*位移样式 
        translate 相对于元素本身*/
    }
    </style>
</head>
<body>
    <div id="app">
        <div id="ep1">
            <span id="content">
             彪悍的人生不需要解释
            </span>
            <input type="text" id="input" value="bh">
            <input type="button" id="save" value="Save">
            <input type="button" id="cancel" value="Cancel">
        </div>
        <div style="width: 50%;background-color:green;">123</div>
    </div>
    <script>
        //js基于原型式面向对象
        function EditInPlace(){
            this.content=document.getElementById('content');
            this.save=document.getElementById('save');
        this.cancel=document.getElementById('cancel');
       this.input=document.getElementById('input');
       this.bindEvents();
        }
        EditInPlace.prototype={
            //罗列方法
            convertToText(){
                this.content.style.display='inline';
                this.save.style.display='none';
            this.cancel.style.display='none';
           this.input.style.display='none';
            },
            convertToEdit(){
                this.content.style.display='none';
                this.save.style.display='inline';
            this.cancel.style.display='inline';
           this.input.style.display='inline';
            },
            bindEvents(){
                // 函数是事件的回调函数 this 指向元素
                // constructor
                // this->editor
                let that=this;//作用域链
                this.content.addEventListener('dblclick',()=>{
                    // 双击的时候 this 丢失 被覆盖 
                    //that.convertToEdit()
                    this.convertToEdit();

                })
            }
        }
        window.onload=function(){
          let editor=new EditInPlace();
          editor.convertToText();
        }
        new EditInPlace();
        // js 来切换现实隐藏
        /*const save=document.getElementById('save');
        const cancel=document.getElementById('cancel');
        const input=document.getElementById('input');
        const content=document.getElementById('content')
        // 函数封装 被执行 复用
        // 函数式编程 组织代码
        //功能复杂，流程式的代码不合适
        function convertToText() {nnn
        content.style.display = 'inline';
        save.style.display = 'none';
        cancel.style.display = 'none';
        input.style.display = 'none';
    }
        convertToText();
        function convertToEdit(){
            content.style.display='none';
    save.style.display='inline';
    cancel.style.display='inline';
    input.style.display='inline';
        }
        content.addEventListener('dblclick',function(){
           
            convertToEdit();
            input.focus();
        })
        save.addEventListener('click',function(){
             //拿到当前的值，并动态设置span
    
            const val=input.value;
            content.innerText=val;
            convertToText();
        })
        cancel.addEventListener('click',function(){
            convertToText();
        })
// dom 动态样式
/*setTimeout(()=>{
    content.style.display='none';
    save.style.display='inline';
    cancel.style.display='inline';
    input.style.display='inline';

})*/


    </script>
</body>
</html>